/**
 * 表格参照公共组件
 * 由于是在以前的代码上新增该功能，所以FormControl要从tinper-bee里面导入，已适配之前的逻辑
 * @param value 输入框的值
 * @param record 操作的行数据
 * @param getRef  获取参照数据
 * @param refDataSource 参照数据源
 */
import { Component } from "react";
import { Icon, Table, Modal, Button, Checkbox } from 'tinper-bee';
import FormControl from 'bee-form-control';
import 'bee-form-control/build/FormControl.css';

import "./index.less";

class ReferEditCell extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refModal: false, // 参照模态框
            searchValue: "", // 搜索内容
            value: props.value || "", // 单元格输入框内容
            dataSource: [], // 参照数据源
            selectedRow: null, // 选中的参照
            isChecked: true, // 是否选中
        };
    }

    componentWillReceiveProps(nextProps) {
        let timedDataSource = [...nextProps.refDataSource];
        this.setState({ dataSource: timedDataSource });
        switch (nextProps.sourceKey) {
            case "pkMilestone":
                this.columns = [
                    {
                        title: "",
                        dataIndex: "_checked",
                        key: "_checked",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <Checkbox checked={text} />
                            )
                        }
                    },
                    {
                        title: "序号",
                        dataIndex: "index",
                        key: "index",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{index + 1}</span>
                            )
                        }
                    },
                    {
                        title: "编码",
                        dataIndex: "code",
                        key: "code",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{text}</span>
                            )
                        }
                    },
                    {
                        title: "里程碑名称",
                        dataIndex: "name",
                        key: "name",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{text}</span>
                            )
                        }
                    },
                ];
                break;
            case "relatedBillType":
                this.columns = [
                    {
                        title: "",
                        dataIndex: "_checked",
                        key: "_checked",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <Checkbox checked={text} />
                            )
                        }
                    },
                    {
                        title: "序号",
                        dataIndex: "index",
                        key: "index",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{index + 1}</span>
                            )
                        }
                    },
                    {
                        title: "编码",
                        dataIndex: "code",
                        key: "code",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{text}</span>
                            )
                        }
                    },
                    {
                        title: "单据类型名称",
                        dataIndex: "name",
                        key: "name",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{text}</span>
                            )
                        }
                    },
                ];
                break;
            case "manager":
                this.columns = [
                    {
                        title: "",
                        dataIndex: "_checked",
                        key: "_checked",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <Checkbox checked={text} />
                            )
                        }
                    },
                    {
                        title: "序号",
                        dataIndex: "index",
                        key: "index",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{index + 1}</span>
                            )
                        }
                    },
                    {
                        title: "负责人",
                        dataIndex: "userName",
                        key: "userName",
                        width: 80,
                        render: (text, record, index) => {
                            return (
                                <span>{text}</span>
                            )
                        }
                    },
                ];
                break;
            default:
                break;
        }
    }

    // 搜索框数据变更
    searchInputChange = (value) => {
        let inputValue = value.target ? value.target.value : value;
        let tableData = this.props.refDataSource;
        this.setState({ searchValue: inputValue }, () => {
            if (inputValue !== "") { // 搜索框的值为空情况下，重置列表数据；不为空，搜索
                let filterTable = tableData.filter((item, index) => {
                    if (item['name']) { // 里程碑or单据列表
                        return (item['code'].toLowerCase()).indexOf(inputValue.toLowerCase()) > -1 || item['name'].indexOf(inputValue.toLowerCase()) > -1;
                    }
                    if (item['userName']) { // 责任人
                        return item['userName'].indexOf(inputValue.toLowerCase()) > -1;
                    }
                });
                this.setState({ dataSource: filterTable });
            } else {
                this.setState({ dataSource: this.props.refDataSource});
            }
        });
    }

    // 搜索图标点击监听
    searchTableList = () => {
        // 直接前端过滤，暂时不做点击搜索
        let keywords = this.state.searchValue;
    }

    closeModal = () => {
        this.setState({ refModal: false });
    }

    // 打开参照
    showReferModal = () => {
        this.setState({ refModal: true });
        this.props.getRef(); // 请求参照数据
    }

    // 清空数据
    clearRefData = () => {
        this.props.onChange(null);
        this.setState({ refModal: false, value: "", selectedRow: null });
    }

    onRowClick = (record, index, event) => {
        // 控制行点击选中并存当前选中行信息
        let timedData = [...this.state.dataSource];
        timedData.map((item, i) => { // 重置选中状态
            if (index === i) {
                timedData[index]._checked = !timedData[index]._checked;
            } else {
                item._checked = false;
            }
        });
        this.setState({ dataSource: timedData, selectedRow: record._checked ? record : null, isChecked: timedData[index]._checked });
    }

    // 确认选择
    confirmSelect = () => {
        if (this.state.selectedRow) {
            let sname = this.state.selectedRow.name ? this.state.selectedRow.name : this.state.selectedRow.userName;
            this.props.onChange(this.state.selectedRow); // input输入数值变化
            this.setState({ value: sname, refModal: false });
        } else {  // 清空
            this.props.onChange(null);
            this.setState({ refModal: false, value: ""});
        }
    }

    // 参照框数据变化
    valueChange = (value) => {
        let inputValue = value.target ? value.target.value : value;
        if(inputValue === "") { this.clearRefData() };
    }

    render() {
        const { } = this.props;
        const { value } = this.state;
        return (
            <div className="refercell">
                <FormControl
                    onClick={this.showReferModal}
                    showClose
                    onChange={this.valueChange}
                    className="refercell-input"
                    suffix={<Icon type={value ? "" : "uf uf-symlist"}/>}
                    value={value} />
                <Modal
                    size="lg"
                    backdrop={false}
                    className="refercell-modal"
                    show={this.state.refModal}
                    onHide={this.closeModal} >
                    <Modal.Header className="refercell-modal-header" closeButton>
                        <Modal.Title>{this.props.title || ""}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body className="refercell-modal-body">
                        <FormControl
                            className="refercell-modal-body-input"
                            onChange={this.searchInputChange}
                            placeholder="请输入编码或名称"
                            value={this.state.searchValue} />
                        <Icon onClick={this.searchTableList} className="refercell-search-icon" type='uf uf-search-light' />
                        <Table
                            scroll={{y: 350}} // 固定表头
                            className="refercell-modal-body-table"
                            onRowClick={this.onRowClick}
                            columns={this.columns}
                            data={this.state.dataSource} />
                    </Modal.Body>
                    <Modal.Footer className="refercell-modal-footer">
                        <Button colors="primary" bordered onClick={this.closeModal} style={{ marginRight: 8 }}>取消</Button>
                        <Button colors="primary" onClick={this.confirmSelect}>确认</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        )

    }
}

export default ReferEditCell;